<template>
  <div class="advanced-filter-demo">
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <span>高级筛选功能演示</span>
          <el-button 
            type="info" 
            @click="advancedSearchExpanded = !advancedSearchExpanded" 
            plain
          >
            <el-icon>
              <component :is="advancedSearchExpanded ? 'ArrowUp' : 'ArrowDown'" />
            </el-icon>
            高级筛选
          </el-button>
        </div>
      </template>
      
      <!-- 基础筛选 -->
      <el-form :model="searchForm" class="search-form">
        <div class="search-form-content">
          <div class="search-form-fields">
            <el-form-item label="关键词">
              <el-input
                v-model="searchForm.keyword"
                placeholder="输入关键词"
                clearable
                style="width: 200px"
              />
            </el-form-item>
            
            <el-form-item label="数据库">
              <el-select
                v-model="searchForm.database"
                placeholder="选择数据库"
                clearable
                style="width: 150px"
              >
                <el-option label="全部" value="" />
                <el-option label="ods_db" value="ods_db" />
                <el-option label="dw_db" value="dw_db" />
                <el-option label="app_db" value="app_db" />
              </el-select>
            </el-form-item>
          </div>
          
          <div class="search-form-actions">
            <el-button type="primary" @click="handleSearch">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
            <el-button type="warning" @click="handleReset">
              <el-icon><Refresh /></el-icon>
              重置
            </el-button>
          </div>
        </div>
        
        <!-- 高级筛选折叠区域 -->
        <transition name="advanced-filter">
          <div v-show="advancedSearchExpanded" class="advanced-filter-section">
            <div class="advanced-filter-fields">
              <el-form-item label="监控状态">
                <el-select
                  v-model="searchForm.monitorStatus"
                  placeholder="选择监控状态"
                  clearable
                  style="width: 140px"
                >
                  <el-option label="全部" value="" />
                  <el-option label="监控中" value="true" />
                  <el-option label="未监控" value="false" />
                </el-select>
              </el-form-item>
              
              <el-form-item label="存储介质">
                <el-select
                  v-model="searchForm.storageMedium"
                  placeholder="选择存储介质"
                  clearable
                  style="width: 120px"
                >
                  <el-option label="全部" value="" />
                  <el-option label="SSD" value="SSD" />
                  <el-option label="HDD" value="HDD" />
                </el-select>
              </el-form-item>
              
              <el-form-item label="分区状态">
                <el-select
                  v-model="searchForm.partitionStatus"
                  placeholder="选择分区状态"
                  clearable
                  style="width: 120px"
                >
                  <el-option label="全部" value="" />
                  <el-option label="分区表" value="true" />
                  <el-option label="非分区表" value="false" />
                </el-select>
              </el-form-item>
              
              <el-form-item label="表大小">
                <el-input-number
                  v-model="searchForm.minSize"
                  placeholder="最小(MB)"
                  :min="0"
                  style="width: 120px"
                />
                <span style="margin: 0 8px">-</span>
                <el-input-number
                  v-model="searchForm.maxSize"
                  placeholder="最大(MB)"
                  :min="0"
                  style="width: 120px"
                />
              </el-form-item>
            </div>
          </div>
        </transition>
      </el-form>
      
      <!-- 说明文字 -->
      <div class="demo-description">
        <el-alert
          title="功能说明"
          type="info"
          :closable="false"
        >
          <ul>
            <li>高级筛选功能通过折叠方式组织额外的筛选条件</li>
            <li>基础筛选条件始终显示</li>
            <li>高级筛选条件通过按钮展开/折叠</li>
            <li>支持平滑的折叠动画效果</li>
            <li>可以组合多个筛选条件进行精确查询</li>
          </ul>
        </el-alert>
        
        <!-- 当前筛选条件展示 -->
        <div class="filter-result">
          <h4>当前筛选条件：</h4>
          <pre>{{ JSON.stringify(searchForm, null, 2) }}</pre>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, Refresh, ArrowDown, ArrowUp } from '@element-plus/icons-vue'

const advancedSearchExpanded = ref(false)

const searchForm = reactive({
  keyword: '',
  database: '',
  monitorStatus: '',
  storageMedium: '',
  partitionStatus: '',
  minSize: null,
  maxSize: null
})

const handleSearch = () => {
  ElMessage.success('搜索完成（演示模式）')
  console.log('搜索条件:', searchForm)
}

const handleReset = () => {
  Object.assign(searchForm, {
    keyword: '',
    database: '',
    monitorStatus: '',
    storageMedium: '',
    partitionStatus: '',
    minSize: null,
    maxSize: null
  })
  ElMessage.success('重置完成')
}
</script>

<style scoped>
.advanced-filter-demo {
  padding: 0;
  margin-top: 20px;  /* 标签页内容区域顶部间距 */
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.search-form-fields {
  display: flex;
  gap: 16px;
  flex: 1;
}

.search-form-actions {
  display: flex;
  gap: 8px;
}

/* 高级筛选折叠区域 */
.advanced-filter-section {
  margin-top: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}

.advanced-filter-fields {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.demo-description {
  margin-top: 20px;
}

.demo-description ul {
  margin: 8px 0 0 0;
  padding-left: 20px;
}

.demo-description li {
  margin-bottom: 4px;
  color: #606266;
}

.filter-result {
  margin-top: 20px;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
}

.filter-result h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.filter-result pre {
  margin: 0;
  padding: 12px;
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  font-size: 12px;
  overflow-x: auto;
}

/* 折叠动画 */
.advanced-filter-enter-active,
.advanced-filter-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.advanced-filter-enter-from,
.advanced-filter-leave-to {
  opacity: 0;
  transform: translateY(-10px);
  max-height: 0;
  overflow: hidden;
}

.advanced-filter-enter-to,
.advanced-filter-leave-from {
  opacity: 1;
  transform: translateY(0);
  max-height: 500px;
}
</style>

